// 主样式入口文件

// ======================
// 使用 @use 替代 @import (必须放在文件最前面)
// ======================
@use 'styles/base/reset';
@use 'styles/base/variables' as *;
@use 'styles/base/mixins' as mix;
@use 'styles/base/functions' as func;

// ======================
// 使用 @forward 转发其他模块
// ======================
// 工具类
@forward 'styles/utils/animations';
@forward 'styles/utils/helpers';

// 布局样式
@forward 'styles/layout/header';
@forward 'styles/layout/sidebar';
@forward 'styles/layout/footer';
@forward 'styles/layout/index';

// 主题样式
@forward 'styles/themes/default';
@forward 'styles/themes/dark';

// 第三方组件库样式覆盖
@forward 'styles/element/index';

// ======================
// 全局样式规则 (保持不变)
// ======================
body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', Arial, sans-serif;
  color: var(--text-color);
  background-color: var(--primary-main-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* 7. 全局滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
#app{max-height: 100vh;max-width: 100vw;}
/* 8. 全局过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 9. 全局工具类(也可放在utils/helpers.scss中) */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* 10. 响应式媒体查询基础设置 */
@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
}
